<template>
  <div class="dashboard flex h-full w-full">
    <div class="dashboard_main w-3/4 overflow-hidden">
      <div class="top border-b border-[#ffffff1a]">
        <div class="notice">
          <SoundOutlined class="icon" />
          <span>通知公告 : {{ content?.noticeTitle }}</span>
        </div>
        <div class="notice_bottom">
          <dataInfo />
        </div>
      </div>
      <div class="bottom">
        <statistics />
        <warning />
        <model />
        <recent />
      </div>
    </div>
    <div class="right_module w-1/4 border-l border-[#ffffff1a]">
      <User />
      <!-- <Device /> -->
      <Earthquake style="height: 0" />
      <Link />
    </div>
  </div>
</template>

<route lang="json">
{
  "name": "dashboard",
  "meta": {
    "title": "首页"
  }
}
</route>
<script setup lang="tsx">
import { ref } from 'vue';
import { SoundOutlined } from '@ant-design/icons-vue';
// import { useDicts } from '@boeyo/portal';
// import { Col, Row } from 'ant-design-vue';
// import { RouterLink, useRouter } from 'vue-router';
import { notice } from './api';
import dataInfo from './components/dataInfo.vue';
// import Device from './components/device.vue';
import Earthquake from './components/earthquake.vue';
import Link from './components/link.vue';
import model from './components/model.vue';
import recent from './components/recent.vue';
import statistics from './components/statistics.vue';
import User from './components/user.vue';
import warning from './components/warning.vue';

const content = ref<Record<string, any>>({});
notice().then((res) => {
  content.value = res.data;
});
</script>

<style lang="scss">
@use './index.scss';
.right_module {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
